// 我们采用ES6语法
//创建vue对象
let vm = new Vue({
    el:'#app',  // 通过ID选择器找到绑定的HTML内容
    // 修改vue读取变量的语法
    delimiters:['[[',']]'],
    data:{// 数据对象
        // v-model
        username:'',
        password:'',
        password2:'',
        mobile:'',
        allow:'',
        image_code_url:'',
        uuid:'',
        image_code:'',
        sms_code_tip: '获取短信验证码',
        sms_code:'',
        send_flag: false,  // 类比上厕所,send_flag就是锁,false表门开,true门关

        // v-show
        error_name: false,
        error_password: false,
        error_password2: false,
        error_mobile: false,
        error_allow: false,
        error_image_code: false,
        error_sms_code: false,

        // error_message
        error_name_message:'',
        error_mobile_message:'',
        error_image_code_message:'',
        error_sms_code_message:'',
    },
    mounted() {// 页面加载完会被调用的
        // 生成图形验证码
        this.generate_image_code();
    },
    methods:{// 定义和实现事件方法
        // 发送短信验证码
        send_sms_code(){
            // 避免恶意用户频繁点击获取短信验证码的标签
            if (this.send_flag == true) {
                return;  // 有人在上厕所,退回去
            }
            this.send_flag = true;  // 如果可以进入厕所,立即关门
            // 校验数据:mobile,image_code
            this.check_mobile();
            this.check_image_code();
            if (this.error_mobile == true || this.error_image_code == true) {
                this.send_flag = false;
                return;
            }

            let url = '/sms_codes/' + this.mobile + '/?image_code=' + this.image_code + '&uuid=' + this.uuid;
            axios.get(url, {
                responseType: 'json'
            })
                .then(response=>{
                    if (response.data.code == '0') {
                        // 展示倒计时60秒效果
                        let num = 60;
                        let t = setInterval(()=> {
                            if (num == 1) {  // 倒计时即将结束
                                clearInterval(t);  // 停止回调函数的执行
                                this.sms_code_tip = '获取短信验证码';  // 还原sms_code
                                this.generate_image_code();  // 重新生成图形验证码
                                this.send_flag = false; // 倒计时结束,释放锁,让人可以重新点
                            } else {  // 正在倒计时
                                num -= 1;  // num = num -1;
                                this.sms_code_tip = num + '秒';
                            }
                        }, 1000)
                    } else {
                        if (response.data.code == '4001') {
                            // 图形验证码错误
                            this.error_image_code_message = response.data.errmsg;
                            this.error_image_code = true;
                        } else {  // 4002 短信验证码错误
                            this.error_sms_code_message = response.data.errmsg;
                            this.error_sms_code = true;
                        }
                        this.send_flag = false;
                    }
                })
                .catch(error=>{
                    console.log(error.response)
                    this.send_flag = false;
                })
        },
        // 生成图形验证码的方法:封装的思想,代码复用
        generate_image_code() {
            this.uuid = generateUUID();
            this.image_code_url = '/image_codes/' + this.uuid + '/';
        },
        // 校验用户名
        check_username(){
            // 用正则匹配
            let re = /^[a-zA-Z0-9_-]{5,20}$/;
            if (re.test(this.username)){
                // 匹配成功,不展示错误信息
                this.error_name = false;
            } else {
                // 匹配不成功,展示错误信息
                this.error_name_message = '请输入5-20个字符的用户名';
                this.error_name = true;
            }

            // 判断用户名是否重复注册
            if (this.error_name == false) {  // 只有当用户输入的用户名满足条件时才会去判断是否重复
                let url = '/usernames/' + this.username + '/count/';
                axios.get(url, {
                    responseType: 'json'
                })
                    .then(response => {
                        if (response.data.count == 1) {
                            // 用户名已存在
                            this.error_name_message = '用户名已存在';
                            this.error_name = true;
                        } else {
                            //用户名不存在
                            this.error_name = false;
                        }
                    })
                    .catch(error => {
                        console.log(error.response)
                    })
            }
        },

        // 校验密码
        check_password(){
        let re = /^[0-9A-Za-z]{8,20}$/;
        if (re.test(this.password)) {
            this.error_password = false;
        } else {
            this.error_password = true;
        }
    },
        // 校验确认密码
        check_password2(){
            if(this.password != this.password2) {
                this.error_password2 = true;
            } else {
                this.error_password2 = false;
            }
        },
        // 校验手机号
        check_mobile(){
            let re = /^1[3-9]\d{9}$/;
            if(re.test(this.mobile)) {
                this.error_mobile = false;
            } else {
                this.error_mobile_message = '您输入的手机号格式不正确';
                this.error_mobile = true;
            }

            // 判断手机号是否重复
            if (this.error_mobile == false) {
                let url = '/mobiles/' + this.mobile + '/count/';
                axios.get(url, {
                    responseType: 'json'
                })
                    .then(response => {
                        if (response.data.count == 1) {
                            // 手机号已存在
                            this.error_mobile = true;
                            this.error_mobile_message = '该手机号已存在';
                        } else {
                            // 手机号不存在
                            this.error_mobile = false;
                        }
                    })
                    .catch(error => {
                        console.log(error.response);
                    })
            }
        },
        // 校验图形验证码
        check_image_code() {
            if (this.image_code.length != 4) {
                this.error_image_code = true;
                this.error_image_code_message = "请输入图形验证码";
            } else {
                this.error_image_code = false;
            }
        },
        // 校验短信验证码
        check_sms_code() {
            if (this.sms_code.length !=6) {
                this.error_sms_code = true;
                this.error_sms_code_message = '请输入正确的短信验证码';
            } else {
                this.error_sms_code = false;
            }
        },
        // 校验是否勾选协议
        check_allow(){
            if(!this.allow) {
                this.error_allow = true;
            } else {
                this.error_allow = false;
            }
        },
        // 监听表单提交事件
        on_submit(){
            this.check_username();
            this.check_password();
            this.check_password2();
            this.check_mobile();
            this.check_allow();
            this.check_image_code();
            this.check_sms_code();

            if(this.error_name == true || this.error_password == true || this.error_password2 == true || this.error_mobile == true || this.error_allow == true || this.error_image_code == true || this.error_sms_code == true) {
                // 禁用表单的提交
                window.event.returnValue = false;
            }
        },
    }
});